<template>
<el-row style="height: 100vh;">
  <div style="
    z-index: 0;
    position: absolute;
    background-color: rgba(0, 186, 173, 1);
    width:100vw;
    height: 40vh;
    top:0;"></div>
  <el-col :span="4"></el-col>
  <el-col :span="16"
    style="display: table; height: 100%;"><div style="
    position: relative;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    top: calc(- 5vh);
    ">
      <div @click="$router.push('/login');" style="
        z-index:1;
        position: absolute;
        padding: 2vw;
        "><el-icon :color="'#736b5e'" :size="'25'"><back/></el-icon></div>
        <div style="
      z-index:1;
      background-color: white;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 4px;
      border: rgba(220, 225, 230, 1) solid 1px;">
    <div id="aa" style="
    position: relative;
      width: 30vw;
      padding: calc(4vw + 25px);
      ">
      <div style="
        width: 150px;
        border-bottom: 1px solid rgba(80, 80, 80, 1);
        margin-bottom: 35px;
        ">
      <span style="
        text-align: center;
        display: block;
        padding: 10px;
        ">找回密码</span></div>
      <el-form id="formFogot" :model="form" @submit.prevent="fogot"><!-- :label-width="'60px'"-->
        <el-form-item>
          <el-input placeholder="请输入邮箱" v-model="username"></el-input>
        </el-form-item>
        <!--el-form-item style="display: grid; grid-template-columns: 1fr 1fr;"-->
        <el-form-item>
          <el-input style="width: 45%; float:left;" placeholder="验证码" v-model="password" :type="password" :show-password=true></el-input>
          <el-button style="position: relative;width: 45%; text-align: center; float: right;">获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" v-model="username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="再次输入密码" v-model="username"></el-input>
        </el-form-item>

      </el-form></div>
    <div style="
      font-size: 14px;
      text-align: left;
      line-height: 200%;
      padding-left: 4.5vw;
      padding-right: 4.5vw;
      display: table;
      height:100%;
      ">
      <div style="
        vertical-align: middle;
        display: table-cell;">
      <p style="
        height: 21px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        line-height: 150%;
        padding-bottom: 9px;">还没有账号：</p>
      <p style="
        height: 21px;
        color: rgba(0, 186, 173, 1);
        font-size: 14px;
        line-height: 150%;
        text-align: left;
        padding-bottom: 17px;">联系管理员</p>
        <el-button @click="submit" href="form" style="
          width: -webkit-fill-available;
          color: rgba(255, 255, 255, 1);
          background-color: rgba(0, 186, 173, 1);
          font-size: 16px;
          margin-top:-10px;
          ">重置密码</el-button>
        </div>
    </div>
    </div>
  </div></el-col>
  </el-row>
</template>

<style scoped>
p {
  margin: 0;
}
#aa::before{
  content: " ";
  position: absolute;
  bottom: 6vw;
  left: 0;
  right: 0;
  height: 300px;
  border-right: 1px solid rgba(229, 229, 229, 1);
  border-top-width: 0;
  
}
</style>
<script>
import { mapMutations } from "vuex";
import  { Back } from '@element-plus/icons';

export default {
  components:{
    Back,
  },
  data () {
    return {
      username: "",
      password: "",
      message: "",
    };
  },
  methods: {
    submit(){
      console.log("abc")
      document.getElementById("formFogot").submit()
      console.log("abc")
    },
    fogot(){
      console.log("abc")
    }
  },
};

</script>

